<template>
  <div class="chat-box">
     <div class="container">
       <div class="container-box">
         <div class="container-left">
             <ul class="userBox">
               <li
                   v-for="(item,index) in userImNameList"
                   :class="item.userId == act ? 'userFlexAct' : 'userFlex'"
                   @click="getAct(item, index)">
                 <div class="userTop"><img :src= "api+item.avatar" alt=""></div>
                 <div class="userCenter">
                   <div>
                     {{item.userName}}
                   </div>
                   <div>
                     {{item.messageData[0].message}}
                   </div>
                 </div>
                 <div class="userBottom">
                   <div>X</div>
                 </div>
               </li>
             </ul>
         </div>
         <div class="container-center">
            <div class="titleTop">
              <div class="titleTopLeft">
                <img class="titleImg" :src="api+messageQuery.avatar" alt="">
              </div>
              <div class="titleTopRight">
                <div>
                  {{messageQuery.userName}}
                </div>
                <div>
                     {{messageQuery.message}}
                </div>
              </div>
            </div>
            <div class="contentmiddol infoList">
              <!-- 信息 -->
              <div class="infoTop" ref="scrollBox" id="box">
                <div
                  :class="
                item.isMeFlag == false ? 'chatInfoLeft' : 'chatInfoRight'
              "
                  v-for="(item, index) in MessageList"
                  :key="index"
                >
                  <img :src="api+item.avatar" alt="头像" class="head_portrait2" />
                  <div :class="item.isMeFlag == false ? 'chatLeft' : 'chatRight'">
                    <div class="text">
                      <div>
                        {{item.message}}</div>
                      <div style="font-size: 10px;text-align: left">
                        {{item.sendTime}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="textButton">
              <!-- 输入框 -->
                <textarea
                  type="textarea"
                  class="infoInput"
                  v-model="textarea"
                  @keydown.enter.exact="handlePushKeyword($event)"
                  @keyup.ctrl.enter="lineFeed"
                  :disabled='isshow==1?false:true'
                />
                <div class="fasong" @click="setUp" v-show="isshow==1?true:false">发送</div>
            </div>
         </div>
         <div class="container-right">
            <div>

            </div>
         </div>
       </div>

     </div>
  </div>
</template>

<script>
    import {getuserMessage,receiveMessage} from "@/api/fileManagement";
    export default {
        data() {
            return {
                ws: null,
                count: 0,
                // userId: this.$store.getters.userId, // 当前用户ID
                username: this.$store.getters.name, // 当前用户昵称
                avatar: this.$store.getters.avatar, // 当前用户头像
                list: [], // 聊天记录的数组
                contentText: "", // input输入的值
                userImNameList:[],//聊天中的人员信息
                api: process.env.VUE_APP_BASE_API,
                MessageList:[],
                messageQuery:{},
                //用户点击选中变色
                act: Number,
                isshow:0,
                textarea:'',
            };
        },
        mounted() {
            console.log(this.$store,'000');
            this.initWebSocket();
            this.queryUser();
        },
        destroyed() {
            // 离开页面时关闭websocket连接
            this.ws.onclose(undefined);
        },
        methods: {
            //人员信息
            queryUser(id){
                getuserMessage().then(res=>{
                    var index =  res.data.findIndex((role) => role.userId === id);
                    if(index==-1){
                        index=0
                    }
                    console.log(index,'index---')
                    this.userImNameList = res.data;
                    this.MessageList = res.data[index].messageData.reverse();
                    this.messageQuery = res.data[index].messageData[0];
                    this.act = res.data[index].userId;
                    this.setPageScrollTo();
                })
            },
            queryMessage(content,id){
                var formData = new FormData();
                formData.append('message',content);
                formData.append('userId',id);
                receiveMessage(formData).then(res=>{
                    this.textarea = '';
                    this.queryUser(id);
                    console.log(res,'----')
                })
            },
            //点击用户
            getAct(val, index) {
                this.isshow=1
                // 点击用户切换数据时先清除监听滚动事件，防止出现没有历史数据的用户，滚动条为0，会触发滚动事件
                this.$refs.scrollBox.removeEventListener("scroll", this.srTop);
                //点击变色
                this.act = val.userId;
                //清空消息数组
                this.MessageList = [];
                this.queryUser(this.act);
                // getuserMessage().then(res=>{
                //     const index =  res.data.findIndex((role) => role.userId === this.act)
                //     this.MessageList = res.data[index].messageData;
                //     this.messageQuery = res.data[index].messageData[0];
                // })
                // 模拟一下点击用户出现历史记录的样子，实际开发中是axios请求后数组赋值然后调用setPageScrollTo
                // if (val.username == "花间一壶酒") {
                //     this.userInfoList = this.userInfoList2;
                //     // 直接调用不生效：因为你历史数据刚给，渲染的时候盒子高度还没有成型，所以直接调用拿不到，用个定时器让他在下一轮循环中调用，盒子就已经生成了
                //     setTimeout((res) => {
                //         this.setPageScrollTo();
                //     }, 100);
                // } else if (val.username == "超人不换内裤") {
                //     this.userInfoList = this.userInfoList3;
                //     // 直接调用不生效：因为你历史数据刚给，渲染的时候盒子高度还没有成型，所以直接调用拿不到，用个定时器让他在下一轮循环中调用，盒子就已经生成了
                //     setTimeout((res) => {
                //         this.setPageScrollTo();
                //     }, 100);
                // } else if (val.username == "王子变蛤蟆") {
                //     setTimeout((res) => {
                //         this.setPageScrollTo();
                //     }, 100);
                // }
            },
            //滚动条默认滚动到最底部
            setPageScrollTo(s, c) {
                //获取中间内容盒子的可见区域高度
                this.scrollTop = document.querySelector("#box").offsetHeight;
                setTimeout((res) => {
                    //加个定时器，防止上面高度没获取到，再获取一遍。
                    if (this.scrollTop != this.$refs.scrollBox.offsetHeight) {
                        this.scrollTop = document.querySelector("#box").offsetHeight;
                    }
                }, 100);
                //scrollTop：滚动条距离顶部的距离。
                //把上面获取到的高度座位距离，把滚动条顶到最底部
                this.$refs.scrollBox.scrollTop = this.scrollTop;
                //判断是否有滚动条,有滚动条就创建一个监听滚动事件，滚动到顶部触发srTop方法
                if (this.$refs.scrollBox.scrollTop > 0) {
                    this.$refs.scrollBox.addEventListener("scroll", this.srTop);
                }
            },
            //滚动条到达顶部
            srTop() {
                //判断：当滚动条距离顶部为0时代表滚动到顶部了
                if (this.$refs.scrollBox.scrollTop == 0) {
                    //逻辑简介：
                    //到顶部后请求后端的方法，获取第二页的聊天记录，然后插入到现在的聊天数据前面。
                    //如何插入前面：可以先把获取的数据保存在 A 变量内，然后 this.userInfoList=A.concat(this.userInfoList)把数组合并进来就可以了

                    //拿聊天记录逻辑:
                    //第一次调用一个请求拉历史聊天记录，发请求时参数带上页数 1 传过去，拿到的就是第一页的聊天记录，比如一次拿20条。你显示出来
                    //然后向上滚动到顶部时，触发新的请求，在请求中把分页数先 +1 然后再请求，这就拿到了第二页数据，然后通过concat合并数组插入进前面，依次类推，功能完成！
                    alert("已经到顶部了");

                }
            },
            // 发送聊天信息
            sendText() {
                let _this = this;
                _this.$refs["sendMsg"].focus();
                if (!_this.contentText) {
                    return;
                }
                let params = {
                    userId: _this.userId,
                    username: _this.username,
                    avatar: _this.avatar,
                    msg: _this.contentText,
                    count: _this.count
                };
                _this.ws.send(JSON.stringify(params)); //调用WebSocket send()发送信息的方法
                _this.contentText = "";
                setTimeout(() => {
                    _this.scrollBottm();
                }, 500);
            },
            // 进入页面创建websocket连接
            initWebSocket() {
                let _this = this;
                // 判断页面有没有存在websocket连接
                if (window.WebSocket) {
                    var serverHot =  '192.168.4.32';
                    let sip = '房间号'
                    // 填写本地IP地址 此处的 :9101端口号 要与后端配置的一致！
                    var url = 'ws://' + serverHot + ':8080' + '/ws2'; // `ws://127.0.0.1/9101/groupChat/10086/聊天室`
                    let ws = new WebSocket(url);
                    _this.ws = ws;
                    ws.onopen = function(e) {
                        console.log("服务器连接成功: " + url);
                    };
                    ws.onclose = function(e) {
                        console.log("服务器连接关闭: " + url);
                    };
                    ws.onerror = function() {
                        console.log("服务器连接出错: " + url);
                    };
                    ws.onmessage = function(e) {
                        //接收服务器返回的数据
                        let resData = JSON.parse(e.data)
                        _this.count = resData.count;
                        _this.list = [
                            ..._this.list,
                            { userId: resData.userId, username: resData.username, avatar: resData.avatar, content: resData.msg }
                        ];
                    };
                }
            },
            // 滚动条到底部
            scrollBottm() {
                let el = this.$refs["msg-box"];
                el.scrollTop = el.scrollHeight;
            },
            // 监听键盘回车阻止换行并发送
            handlePushKeyword(event) {
                console.log(event);
                if (event.keyCode === 13) {
                    event.preventDefault(); // 阻止浏览器默认换行操作
                    this.setUp(); //发送文本
                    return false;
                }
            },
            // 监听按的是ctrl + 回车，就换行
            lineFeed() {
                console.log("换行");
                this.textarea = this.textarea + "\n";
            },
            setUp() {
                this.queryMessage(this.textarea,this.act);
            },
        }
    };
</script>

<style lang="scss" scoped>
  .chat-box{
    height: calc(100vh - 84px);
  }
  .container{
    display: flex;
    background: #ccc;
    height:100%;
    .container-box{
       margin:20px;
      flex: 1;
      display: flex;
      .container-left{
        flex: 1;
        background: #fff;
        border: 2px solid #bfcbd9;
        .userBox{
           padding: 20px;
          /* 点击用户变色 */
          .userFlexAct {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            border-bottom: 1px solid #e8e8e8;
            cursor: pointer;
            background-color: #e8e8e8;
            .userTop{
              width:40px;
              img{
                width:100%;
                height:40px;
                border-radius: 50%;
                vertical-align: middle;
              }
            }
            .userCenter{
              flex:1;
              margin-left: 10px;
              display: flex;
              flex-direction: column;
            }
            .userBottom{
              line-height: 40px;
            }
          }
          /* 用户默认颜色 */
          .userFlex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            border-bottom: 1px solid #e8e8e8;
            cursor: pointer;
          /*}*/
          /*.userFlex{*/
          /*  display: flex;*/
          /*  height:60px;*/
          /*  border: 1px solid #ccc;*/
          /*  margin-bottom:20px;*/
          /*  padding:10px;*/
          /*  border-radius: 10px;*/
            .userTop{
              width:40px;
              img{
                width:100%;
                height:40px;
                border-radius: 50%;
                vertical-align: middle;
              }
            }
            .userCenter{
              flex:1;
              margin-left: 10px;
              display: flex;
              flex-direction: column;
            }
            .userBottom{
              line-height: 40px;
            }
          }
        }
      }
      .container-center{
        flex: 2;
        background: #fff;
        margin:0 20px;
        border: 2px solid #bfcbd9;
        display: flex;
        flex-direction: column;
        .titleTop{
          flex: 0.3;
          display: flex;
          padding:5px 10px;
          align-items: center;
          background: #2849f7;
          .titleTopLeft{
            padding-right: 10px;
            .titleImg{
               width:40px;
              height:40px;
              vertical-align: middle;
              border-radius: 20px;
            }
          }
          .titleTopRight{
            flex: 1;
          }
        }
        .contentmiddol{
          flex: 4;
          overflow-y: scroll;
          /* 头像 */
          .head_portrait {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          }
          .head_portrait2 {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          }
          /* 对方发的信息样式 */
          .chatInfoLeft {
            min-height: 70px;
            margin-left: 10px;
            margin-top: 10px;
            display: flex;
          }
          .chatLeft {
            margin-left: 15px;
            flex: 1;
          }
          .chatLeft .text {
            color: #434343;
            margin-top: 8px;
            background-color: #e3e3e3;
            display: inline-block;
            padding: 6px 10px;
            border-radius: 10px;
            max-width: 50%;
            /* 忽略多余的空白，只保留一个空白 */
            white-space: normal;
            /* 换行显示全部字符 */
            word-break: break-all;
            white-space: pre-wrap;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          }

          /* 自己发的信息样式 */
          .chatInfoRight {
            height: 70px;
            margin-right: 10px;
            margin-top: 10px;
            display: flex;
            flex-direction: row-reverse;
          }
          .chatRight {
            margin-right: 15px;
            flex: 1;
            /* 用align-items把元素靠右对齐 */
            display: flex;
            flex-direction: column;
            align-items: flex-end;
          }
          .chatRight .text {
            color: #434343;
            margin-top: 8px;
            background-color: #95ec69;
            display: inline-block;
            padding: 6px 10px;
            border-radius: 10px;
            max-width: 50%;
            /* 忽略多余的空白，只保留一个空白 */
            white-space: normal;
            /* 换行显示全部字符 */
            word-break: break-all;
            white-space: pre-wrap;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          }
        }
        .textButton{
          flex:1;
          /* 输入框 */
          .infoInput {
            height:70%;
            width: 100%;
            border: none;
            resize: none;
            padding: 10px;
            box-sizing: border-box;
            background-color: #f2f2f2;
            color: #434343;
          }
          .fasong {
            height: 30px;
            width: 80px;
            background-color: #e8e8e8;
            text-align: center;
            line-height: 30px;
            border-radius: 4px;
            color: #58df4d;
            margin-top: 1%;
            align-self: flex-end;
            margin-right: 20px;
            cursor: pointer;
            float: right;
          }

        }
      }
      .container-right{
        flex: 1;
        background: #fff;
        border: 2px solid #bfcbd9;
      }
    }

  }
</style>

